<template>
  <div
    class="all"
    :style="{ height: screenHeight + 'px', width: screenWidth + 'px' }"
  >
    <Return style="background: #eeeeee" txt="按照条件查找陌生人"></Return>
    <div class="list">
      <div
        class="listone"
        :class="status == 0 ? 'color' : ''"
        @click="choose(0)"
      >
        <img src="../../../assets/images/nan.png" alt="" />
        <span>男</span>
      </div>
      <div
        class="listone"
        :class="status == 1 ? 'color' : ''"
        @click="choose(1)"
      >
        <img src="../../../assets/images/nv.png" alt="" />
        <span>女</span>
      </div>
      <div
        class="listone"
        :class="status == 2 ? 'color' : ''"
        @click="choose(2)"
      >
        <span>不限</span>
      </div>
    </div>
    <div class="line"></div>
    <div class="row">
      <van-field
        readonly
        clickable
        label="年龄"
        :value="value"
        placeholder="选择年龄"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>
    <div class="row">
      <van-field
        readonly
        clickable
        label="地区"
        :value="value1"
        placeholder="选择地区"
        @click="showPicker1 = true"
      />
      <van-popup v-model="showPicker1" round position="bottom">
        <van-picker
          show-toolbar
          :columns="columns1"
          @cancel="showPicker1 = false"
          @confirm="onConfirm1"
        />
      </van-popup>
    </div>
    <div class="button"><van-button type="primary" size="large" @click="tap">查找</van-button></div>
  </div>
</template>
<script>
import Return from "../../../components/return";
import { Picker } from "vant";
export default {
  components: {
    Return,
  },
  data() {
    return {
      screenWidth:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      screenHeight:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
      status: 0,
      columns:[
        // 第一列
        {
          values: ["80","81","82",'83',"84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","00","01","02","03","04"],
          defaultIndex: 2,
        },
        // 第二列
        {
          values: ["80","81","82",'83',"84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","00","01","02","03","04"],
          defaultIndex: 1,
        },
      ],
      columns1: ["江西", "湖南", "广东", "四川"],
      showPicker: false,
      value: "",
      showPicker1: false,
      value1: "",
    };
  },
  methods: {
    choose(index) {
      this.status = index;
    },
    onConfirm(value, index) {
      this.value = value;
      this.showPicker = false;
    },
    onChange(picker, value, index) {},
    onCancel() {},
    onConfirm1(value, index) {
      this.value1 = value;
      this.showPicker1 = false;
    },
    onChange(picker, value, index) {},
    onCancel() {},
    tap(){
        this.$router.push('fujing');
    }
  },
};
</script>
<style scoped>
.all {
  background: #eeeeee;
}
.listone {
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: 22px;
  font-weight: bold;
}
.listone img {
  width: 22px;
  margin-right: 5px;
}
.color {
  background: #00cafc !important;
  color: white !important;
}
.line {
  height: 5px;
  width: 100%;
  background: #eeeeee;
}
.van-cell__value {
  text-align: right;
}
.button{
    width: 90%;
    margin-left: 5%;
    margin-top: 80px;
}
</style>